import Sheet from '@/components/sheet/Sheet';
import Tabs from '@/components/tsbs/Tabs';
import { LiveType } from '@/model/home/types';
import { ScrollView } from '@tarojs/components';
import React, { ReactElement } from 'react';
import { AtActionSheet, AtActionSheetItem, AtList, AtListItem, AtMessage } from 'taro-ui';
import './home.scss';

const perfix = 'home_view';

interface Props {
  list: LiveType[];
  handleItem: (value: LiveType) => void;
  visible: boolean;
  setVisible: (value: boolean) => void;
  clickSocket: () => void;
  clickRtc: () => void;
  title: string;
}

const Home = ({ title, clickRtc, clickSocket, list, handleItem, setVisible, visible }: Props): ReactElement => (
  <ScrollView className={`${perfix}_warpper`} scrollY>
    <AtList>
      {list.map((item) => (
        <AtListItem
          key={item.id}
          title={item.title}
          note={item.explain}
          arrow="right"
          iconInfo={{ size: 25, color: '#78A4FA', value: 'calendar' }}
          onClick={() => handleItem(item)}
        />
      ))}
    </AtList>

    <Tabs />

    <AtActionSheet
      cancelText="取消"
      title={`请选择加入${title}房间的方式`}
      isOpened={visible}
      onClose={() => setVisible(false)}
    >
      <AtActionSheetItem onClick={clickSocket}>websocket</AtActionSheetItem>
      <AtActionSheetItem onClick={clickRtc}>webrtc</AtActionSheetItem>
    </AtActionSheet>

    <AtMessage />
  </ScrollView>
);
export default Home;
